<template>
  <div
    :class="`${disabled ? 'disabled' : ''} options ${active?'active':''} ${hideBg?'':'bg-color'}`"
    :style="`color:${color}`"
    :title="title"
    @click="clickOption">
    <div class="icon-box">
      <mu-icon v-if="active || icon" :icon-class="icon||'ipm-iconcheck'" />
    </div>
    <div class="text">{{ label }}</div>
  </div>
</template>
<script>
  export default {
    props: {
      title: {
        type: String,
        default: ''
      },
      label: {
        type: String,
        default: ''
      },
      value: {
        type: [String, Number, Boolean, Object],
        default: ''
      },
      active: {
        type: Boolean,
        default: false
      },
      disabled: {
        type: Boolean,
        default: false
      },
      color: {
        type: String,
        default: '#333'
      },
      icon: {
        type: String,
        default: ''
      },
      hideBg: {
        type: Boolean,
        default: false
      }
    },

    methods: {
      clickOption () {
        if (!this.disabled) {
          this.$emit('click', this.value)
        }
      }
    }
  }
</script>

<style scoped>
.options {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 4px;
  padding-right: 20px;
  box-sizing: border-box;
}

.options.active {
  color: #008cd6 !important;
}

.options.active.bg-color {
  background-color: #f4fbff;
}

.options:hover {
  background-color: #E5F0FB;
  cursor: pointer;
}

.disabled {
  color: #bbb !important;
}

.disabled:hover {
  color: #bbb;
}

.icon-box {
  min-width: 20px;
}

.options .text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

</style>
